import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

import { createRoot } from "react-dom/client";
import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  grossProfitGradientColor,
  legendCommonConfig,
  lineChartGridCommonConfig,
  lineChartSeriesCommonConfig,
  lineChartTooltipCommonConfig,
  lineChartXAxisCommonConfig,
  lineChartYAxisCommonConfig,
  purGradientColor,
  supGradientColor,
} from "../helps/echartsCommon";
import { zhMonthGenerator } from "../helps";

const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);
export const getAmountLineChartOption = ({
  purchaseAmount,
  shipmentAmount,
  profitAmount,
  businessAmount = [],
  saleBusinessAmount = [],
  unitName,
}: AmountLineChartProps): EChartsOption => {
  return {
    color: ["#68A8FF", "#8CDCB8", "#DCBA63"],

    tooltip: {
      ...lineChartTooltipCommonConfig,

      formatter: (params: any) => {
        console.log(params, "params");

        const sup = params.find((p: any) => p.seriesName == "销售");
        const pur = params.find((p: any) => p.seriesName == "采购");
        const profit = params.find((p: any) => p.seriesName == "毛利润");
        const business = businessAmount[sup?.dataIndex || 0];
        const salBusiness = saleBusinessAmount[sup?.dataIndex || 0];
        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>{pur?.name}</ToolTipFonts>
            <ToolTipFonts>采购额：{pur?.value || 0}万元</ToolTipFonts>
            <ToolTipFonts>销售额：{sup?.value || 0}万元</ToolTipFonts>
            <ToolTipFonts>毛利润：{profit?.value || 0}万元</ToolTipFonts>
            <ToolTipFonts>采购业务量：{business || 0}单</ToolTipFonts>
            <ToolTipFonts>销售业务量：{salBusiness || 0}单</ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },
    legend: {
      ...legendCommonConfig,

      data: ["销售", "采购", "毛利润"],
    },

    grid: {
      ...lineChartGridCommonConfig,
    },
    xAxis: [
      {
        ...lineChartXAxisCommonConfig,
        data: zhMonthGenerator(shipmentAmount),
      },
    ],
    yAxis: [
      {
        ...lineChartYAxisCommonConfig,
        name: "单位：" + unitName,
      },
    ],
    series: [
      {
        name: "销售",
        ...lineChartSeriesCommonConfig,
        areaStyle: {
          color: supGradientColor,
        },

        data: shipmentAmount,
      },
      {
        name: "采购",
        ...lineChartSeriesCommonConfig,
        areaStyle: {
          color: purGradientColor,
        },

        data: purchaseAmount,
      },
      {
        name: "毛利润",
        ...lineChartSeriesCommonConfig,
        areaStyle: {
          color: grossProfitGradientColor,
        },

        data: profitAmount,
      },
    ],
  };
};

export interface AmountLineChartProps extends CockpitChartBaseProps {
  /**
   *  销售额
   */
  shipmentAmount?: number[];

  /**
   * 采购额
   */
  purchaseAmount?: number[];

  /**
   * 毛利润
   */
  profitAmount?: number[];

  /**
   * 业务量
   */
  businessAmount?: number[];
  /**
   * 销售业务量
   */
  saleBusinessAmount?: number[];

  unitName?: string;
}
export const AmountLineChart = ({
  reactEChartsProps,
  shipmentAmount = [],
  purchaseAmount = [],
  profitAmount = [],
  businessAmount = [],
  saleBusinessAmount = [],
  unitName = "万元",
}: AmountLineChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      option={getAmountLineChartOption({
        shipmentAmount,
        purchaseAmount,
        profitAmount,
        businessAmount,
        saleBusinessAmount,
        unitName,
      })}
      {...reactEChartsProps}
    />
  );
};
export default AmountLineChart;
